<template>
  <a-drawer
    title="添加常用医嘱"
    :width="800"
    :visible="visible"
    :body-style="{padding:'12px'}"
    @close="visible=false"
  >
    <a-spin :spinning="spinning">
      <a-tabs :default-active-key="1" @change="changeTabs" type="line"  >
        <a-tab-pane :key="1" tab="选择项目">
          <a-table
            bordered
            :pagination="pagination"
            size="small"
            :columns="itemColumns"
            :data-source="tableData"
            :rowKey="(record,index)=> index"
            :customRow="clickRow"
            @change="handleProductTableChange"
          >
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="选择药物">
          <a-table
            bordered
            :pagination="pagination"
            size="small"
            :columns="drugsColumns"
            :data-source="tableData"
            :rowKey="(record,index)=> index"
            :customRow="clickRow"
            @change="handleProductTableChange"
          >
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>

  </a-drawer>
</template>

<script>
import {sysUserAdd} from '@/api/modular/system/userManage'
import { CommonlyDrugsList,addCommonlyPrescribed } from '@/api/bd/doctorEnjoin'


export default {
  data() {
    return {
      tableData:[],
      spinning:false,
      visible: false,
      itemColumns:[
        { title: '序号', customRender:(text,record,index)=>(this.queryParam.pageNum - 1) * this.queryParam.pageSize + (index + 1),width:60 },
        { title: '拼音码', dataIndex: 'pyCode',width: 130, ellipsis: true },
        { title: '项目名称', dataIndex: 'name', width: 100, ellipsis: true},
        { title: '数量', dataIndex: 'qty', width: 100,ellipsis: true },
        { title: '单位', dataIndex: 'basicUnit', width: 100,ellipsis: true },
        { title: '价格', dataIndex: 'price',width: 100, ellipsis: true },
        { title: '备注', dataIndex: 'remark', width: 90, ellipsis: true }
      ],
      drugsColumns:[
        { title: '序号', customRender:(text,record,index)=>(this.queryParam.pageNum - 1) * this.queryParam.pageSize + (index + 1),width:60 },
        { title: '拼音码', dataIndex: 'pyCode',width: 130, ellipsis: true },
        { title: '项目名称', dataIndex: 'name', width: 100, ellipsis: true},
        { title: '数量', dataIndex: 'qty', width: 100,ellipsis: true },
        { title: '单位', dataIndex: 'basicUnit', width: 100,ellipsis: true },
        { title: '价格', dataIndex: 'price',width: 100, ellipsis: true },
        { title: '备注', dataIndex: 'remark', width: 90, ellipsis: true }
      ],
      queryParam:{
        pageNum:1,
        pageSize:10,
        distinguish:1
      },
      pagination: {
        current: 1, //当前页
        pageSize: 10, //当前页数
        total: 0, //总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10', '15'], //这里注意只能是字符串，不能是数字
        showTotal: (total) => `${total}条 `, //分页中显示总的数据
      },
    }
  },
  methods: {
    // 初始化方法
    show() {
      this.visible = true
      this.getCommonlyDrugsList()
    },
    getCommonlyDrugsList(){
      this.spinning = true
      CommonlyDrugsList(this.queryParam).then(res=>{
        this.spinning = false
        // console.log('药物',res)
        this.tableData = res.rows
        this.pagination.total = parseInt(res.total) || 0
      })
    },

    changeTabs(key) {
      this.queryParam.distinguish=key
      this.pagination.current= this.queryParam.pageNum=1
      this.pagination.pageSize= this.queryParam.pageSize=10
      this.getCommonlyDrugsList()
    },
    /**
     分页
     * */
    handleProductTableChange(pagination, filters, sorter) {
      this.pagination.current = pagination.current
      this.pagination.pageSize = pagination.pageSize
      this.queryParam.pageNum=pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getCommonlyDrugsList()
    },
    /**
     表格行点击事件
     * */
    clickRow(record){
      return {
        on: {
          dblclick:(e)=>{
            addCommonlyPrescribed({
              ...record,
              distinguish:this.queryParam.distinguish
            }).then(res=>{
              console.log('双击表格结果',res)
              if(res.data){
                this.$message.success('新增成功')
                this.$emit('success')
              }else{
                this.$message.warning('新增失败')
              }
            })
          }
        }
      }
    }
  }
}
</script>

<style scoped>
/deep/ .ant-form-item{
  margin-bottom: 17px;
}
/deep/ .ant-form-item-with-help{
  margin-bottom: 0px;
}
/deep/ .ant-table-small > .ant-table-content > .ant-table-body{
  margin: 0;
}
/deep/ .ant-tabs-content{
  height: 100%;
}
/deep/  .ant-table-small.ant-table-bordered .ant-table-content{
  border-right: 0;
}
</style>
